<template>
    <div class="user-center">
        <div class="user-menu">
            <div class="menu-item" v-for="(item, index) in menuList" :key="index"
                :class="{ active: menuIndex === index }" @click="changeMenu(index)" v-show="item.isShow">
                <el-icon :size="18">
                    <span class="iconfont" :class="item.icon"></span>
                </el-icon>
                <span>{{ item.name }}</span>
                <strong v-if="item.num">{{item.num}}</strong>
            </div>
        </div>
        <div class="content">
            <div class="content-padding">
                <component :is="contentComponent" @handle-success="handleSuccess" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { Message } from '@/api/user'
import { useCompanyDataStore } from '@/store/companys'
import { computed, markRaw, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import BaseInfo from './components/BaseInfo.vue'
import ConfigurationManagement from './components/ConfigurationManagement.vue'
import EmployeeNotice from './components/EmployeeNotice.vue'
import EmployeeRole from './components/EmployeeRole.vue'
import EnterpaiseManagement from './components/EnterpaiseManagement.vue'
import SystemNotice from './components/SystemNotice.vue'
import ValueAddService from './components/ValueAddService.vue'

const router = useRouter()
const route = useRoute();
const type = route.query.type;

const companyDataStore = useCompanyDataStore()
const currentComanyInfo = computed(() => companyDataStore.currentComanyInfo)

const messageData = ref({
    employeeNotice: 0, // 员工通知数量
    systemNotice: 0   // 系统通知数量
})

const menuList = computed(() => [{
    name: '基本信息',
    icon: 'icon-ziliao',
    path: markRaw(BaseInfo),
    isShow: true
},{
    name: '增值服务',
    icon: 'icon-huiyuan-',
    path: markRaw(ValueAddService),
    isShow: (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('1') ||
         (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('3')
}, {
    name: '员工角色',
    icon: 'icon-sysaccount-gray',
    path: markRaw(EmployeeRole),
    isShow: (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('1')
},  {
    name: '企业管理',
    icon: 'icon-a-zhiyebingzhenduanguanliqiye',
    path: markRaw(EnterpaiseManagement),
    isShow: true
}, {
    name: '配置管理',
    icon: 'icon-peizhiguanli',
    path: markRaw(ConfigurationManagement),
    isShow: false
}, {
    name: '员工通知',
    icon: 'icon-yuangongguanli',
    path: markRaw(EmployeeNotice),
    isShow: (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('1') ||
         (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('3'),
    num: messageData.value.employeeNotice
}, {
    name: '系统通知',
    icon: 'icon-xitongtongzhi',
    path: markRaw(SystemNotice),
    isShow: (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('1') ||
         (currentComanyInfo.value?.role_id || '').split(',').map(item => item.trim()).includes('3'),
    num: messageData.value.systemNotice
}])
const menuIndex = ref(0)
const contentComponent = computed(() => menuList.value[menuIndex.value].path)

const handleSuccess = () => {
    getMessageNum()
}

const getMessageNum = () => {
    Message({
        page: 1,
        limit: 10
    }).then(res => {
        messageData.value = {
            employeeNotice: res.data.type1 || 0,
            systemNotice: res.data.type2 || 0
        }
        if(messageData.value.employeeNotice == 0 && messageData.value.systemNotice == 0) {
            companyDataStore.setMsgAllread()
        }
    })
}

const changeMenu = (index: number) => {
    if (index == 1 || index == 5 || index == 6) {
        if(companyDataStore.checkAuth()) {
            menuIndex.value = index
        }
    } else {
        menuIndex.value = index
    }
}

onMounted(() => {
    menuIndex.value = type ? Number(type) : 0
    if ([1, 3].includes(currentComanyInfo.value?.role_id || 0) && companyDataStore.defaultCompany?.status === 1){
        getMessageNum()
    }
})

watch(() => route.query._t, () => {
    menuIndex.value = 5
})
</script>
<style lang="scss" scoped>
.user-center {
    display: flex;
    height: calc(100vh - 140px);

    .user-menu {
        width: 152px;
        background-color: #fff;
        height: inherit;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .menu-item {
            width: 120px;
            height: 44px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            margin-top: 10px;
            padding-left: 16px;
            cursor: pointer;

            &:hover,
            &.active {
                background-color: #f5f9fc;
                color: #0055a8;
            }

            span {
                font-size: 14px;
                margin-left: 3px;
            }

            strong{
                font-weight: normal;
                background-color: #f96561;
                color: #fff;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 10px;
                font-size: 12px;
                margin-left: 10px;
            }
        }
    }

    .content {
        flex: 1;
        height: inherit;
        background-color: #fff;
        border-radius: 10px;
        margin-left: 20px;
        overflow-y: scroll;

        .content-padding {
            padding: 15px;
        }
    }
}
</style>